<template>
  <uniSwiperDot :info="swipers" :current="current" field="content" mode="dot">
    <swiper class="swiper" @change="change">
      <swiper-item class="swiperItem" v-for="(item, key) of swipers" :key="key">
        <image
          :src="item"
          fade-show
          mode="aspectFill"
          @click="see(key)"
        ></image>
      </swiper-item>
    </swiper>
    <view class="dots-num"> {{ current + 1 }}/{{ swipers.length }} </view>

    <!-- <toolsPreviewImage
      ref="toolsPreviewImage"
      :list="getImages"
      :current="current"
    ></toolsPreviewImage> -->
  </uniSwiperDot>
</template>

<script>
import toolsPreviewImage from "@/components/tools/tools-previewImage";
import uniSwiperDot from "./uni-swiper-dot.vue"

export default {
  components: {
    toolsPreviewImage,
    uniSwiperDot
  },

  props: {
    swipers: {
      type: Array,
      default() {
        return [];
      },
    },
  },

  computed: {
    getImages() {
      return this.swipers.map((el) => {
        return { url: el };
      });
    },
  },

  data() {
    return {
      current: 0,
    };
  },

  methods: {
    change(e) {
      this.current = e.detail.current;
    },

    see(current) {
      uni.previewImage({
        current,
        urls: this.swipers,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.swiper,
.swiperItem {
  height: 900rpx;
}

.swiperItem {
  background: #e0e0e0;

  image {
    width: 100%;
    height: 100%;
  }
}

.dots-num {
  position: absolute;
  right: 28rpx;
  bottom: 28rpx;
  padding: 6rpx 12rpx;
  color: #fff;
  border-radius: 32px;
  background: rgba(0, 0, 0, 0.5);
}
</style>
